<template>
    <div>
      <Menu :active-name="currentView" @on-select="changeMenuPage" theme="dark" width="auto" :open-names="['1']" :accordion="true">
        <menuSub :menus="menuList"></menuSub>
      </Menu>
    </div>

</template>

<script>
  import {mapState, mapMutations,mapActions} from 'vuex';
  import menuSub from "./menu_sub"
  import {getUserMenuList} from '@/api/sys/system/sysMenu'

  export default {
    name: "sysMenu",
    props:{
    },
    computed: {
      ...mapState(['currentView'])
    },
    components: {
      menuSub
    },
    data(){
      return {
        menuList : [],
      }
    },
    created(){
      this.userMenuList();
    },
    methods : {
      ...mapMutations([
        'changeCurrentView',
        'setMenuList',
      ]),
      changeMenuPage(name){
        var tagName;
        var itemMenu = null;
        var itemMenus = [...this.menuList];
        while(itemMenus.length > 0){
          itemMenu = itemMenus.pop();
          //如果存在则获取菜单名称关闭循环
          if(itemMenu.menuHref && itemMenu.menuHref == name){
            tagName = itemMenu.menuName;
          }else{
            //不存在则查看有没有子菜单，有则把子菜单放入循环列表。
            if(itemMenu.children && itemMenu.children.length > 0){
              itemMenus = itemMenus.concat(itemMenu.children)
            }
          }
        }
        if(tagName){
          this.changeCurrentView({url:name,title:tagName});
        }
      },
      userMenuList(){
        getUserMenuList().then(result =>{
          this.menuList = result.data;
          this.setMenuList(result.data);
        });
      }
    }
  }
</script>
